<!-- Scratchpad gets populated through call to .Inner -->  
{{- .Inner -}}

{{ $ref := $.Ordinal }}
{{ with $.Get "ref" }}
  {{ $ref = $.Get "ref" }}
{{ end }}

{{/* Read optional parameter showCopyButton (default true) */}}
{{ $showCopyButton := true }}
{{ with $.Get "showCopyButton" }}
  {{ if eq (lower .) "false" }}
    {{ $showCopyButton = false }}
  {{ end }}
{{ end }}

<ul class="nav nav-tabs" id="tabs-{{- $ref -}}" role="tablist">
  {{- range $index, $element := $.Scratch.Get "tabs" -}}
    <li class="nav-item">
      <!-- Generate the IDs for the <a> and the <div> elements -->
      {{- $tabid := printf "tabs-%v-%v-tab" $ref $index | anchorize -}}
      {{- $entryid := printf "tabs-%v-%v" $ref $index | anchorize -}}
      <!-- Replace space and + from tabname to set class -->
      {{- $tabname := replaceRE "(\\s)" "-" $element.header -}}
      {{- $tabname := replaceRE "(\\+)" "-" $tabname -}}
      <a class="nav-link{{ if eq $index "0" }} active{{ end }} tab-{{ $tabname }}"
        id="{{ $tabid }}" data-toggle="tab" href="#{{ $entryid }}" role="tab" onclick="handleClick({{ $tabname }});"
        aria-controls="{{ $entryid }}" aria-selected="{{- cond (eq $index "0") "true" "false" -}}">
        {{ index . "header" }}
      </a>
    </li>
  {{- end -}}
</ul>

<!-- Inner content -->
{{ if $showCopyButton }}
<div class="bd-clipboard">
  <button type="button" class="btn btn-clipboard btn-outline-light" title="Copy to clipboard"
    onClick="javascript:copyTabContentToClipboard('tabs-{{- $ref -}}', this);">Copy</button>
</div>
{{ end }}

<div class="tab-content" id="tabs-{{- $ref -}}-content">
  {{- range $index, $element := $.Scratch.Get "tabs" -}}
    {{- $tabid := printf "tabs-%v-%v-tab" $ref $index | anchorize -}}
    {{- $entryid := printf "tabs-%v-%v" $ref $index | anchorize -}}
    <div class="tab-pane fade{{ if eq $index "0" }} show active{{ end }}"
        id="{{ $entryid }}" role="tabpanel" aria-labelled-by="{{ $tabid }}">
      {{ $element.content }}
    </div>
  {{ end }}
</div>
